<template>
  <div>
      <el-row>
          <el-col :span="24">
              <grid-layout
                      :layout="layout"
                      :col-num="24"
                      :row-height="65"
                      :is-draggable="true"
                      :is-resizable="false"
                      :is-mirrored="false"
                      :vertical-compact="true"
                      :margin="[10, 10]"
                      :use-css-transforms="true"
                      style="margin-top: -10px"
                      @layout-updated="layoutUpdatedEvent"
                      @moved="movedEvent"
              >

                  <grid-item v-for="item in layout"
                             :x="item.x"
                             :y="item.y"
                             :w="item.w"
                             :h="item.h"
                             :i="item.i"
                             style="background-color: #fff;
                             border-radius: 2px;
                             box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);">
                      <component :is="item.name" :title="item.params.title" :name="item.params.name"></component>
                  </grid-item>
              </grid-layout>
          </el-col>
      </el-row>
  </div>
</template>
<script>
    import VueGridLayout from 'vue-grid-layout';
    import GridLoginInfoDispatch from './GridLoginInfo.vue'; // 调度模板登陆信息
    import GridLoginInfo from './GridLoginInfo.vue';  // 其余两种模板登陆信息
    import GridTodayOrder from './GridBase.vue';   // 今日订单
    import GridBaseDataStandard from './GridBaseData.vue';   // 基本数据
    import GridAccountRecord from './GridAccountRecord.vue';   // 账户记录

    import GridTodayExpress from './GridBase.vue';   // 今日快件  遗留快件
    import GridTLegacyExpress from './GridBase.vue';   // 遗留快件
    import GridBaseDataDispatch from './GridBaseData.vue';   // 基本数据
    import GridExpressMap from './GridExpressMap.vue';   // 快件地图
    import GridChartPie from './GridChart.vue';   // 快件地图
    import GridChartFunnel from './GridChart.vue';   // 快件地图
    import GridChartBar from './GridChart.vue';   // 快件地图

    import GridShopData from './GridBaseData.vue';   // 消费数据


    //个人统计页面
    import RecentData from './personalStatisticsGrid/RecentData.vue';   // 近30天数据
    import NewUserModel from './personalStatisticsGrid/UserModel.vue';   // 新用户
    import OldUserModel from './personalStatisticsGrid/UserModel.vue';   // 老用户
    import OrderTable from './personalStatisticsGrid/OrderTable.vue';   // 各类订单
    import CarCard from './personalStatisticsGrid/CarCard.vue'; //  宣传图片
    import ActivityList from './personalStatisticsGrid/ActivityList.vue'; // 活动列表
    //个人统计页面
    export default {
        props: {
            layout: {
                type: Array,
                default: () => {
                    return [
                        // {"x":0,"y":0,"w":16,"h":2,"i":"0","name":"GridLoginInfo",'params':{'title':'登陆信息','name':'default'}}
                    ]
                }
            }
        },
        components: {
            VueGridLayout,
            GridLoginInfoDispatch,
            GridLoginInfo,
            GridTodayOrder,
            GridBaseDataStandard,
            GridAccountRecord,

            GridTodayExpress,
            GridTLegacyExpress,
            GridBaseDataDispatch,
            GridExpressMap,
            GridChartPie,
            GridChartFunnel,
            GridChartBar,

            GridShopData,
            RecentData, //    近30天数据
            NewUserModel, //    新用户
            OldUserModel, //    老用户
            OrderTable, //    各类订单
            CarCard,
            ActivityList

        },

        data() {
            return {
                modelSelect: '',
                componentList: {
                    // 'GridLoginInfoDispatch':{'w': 16, 'h': 2},  // 调度模板登陆信息
                    // 'GridLoginInfo':{'w': 16, 'h': 2},   // 其余两种模板登陆信息
                    // 'GridTodayOrder':{'w': 16, 'h': 2},  // 今日订单
                    // 'GridBaseData':{'w': 8, 'h': 4},  // 基本数据
                    // 'GridAccountRecord':{'w': 24, 'h': 10},  // 基本数据
                    //
                    //
                    // 'GridTodayExpress':{'w': 24, 'h': 10},  // 今日快件
                    // 'GridTLegacyExpress':{'w': 24, 'h': 10}  // 遗留快件
                },
                // layout:[
                //     // {"x":0,"y":0,"w":8,"h":2,"i":"0","name":"chart",'param':{'title':'123','key':'123'}}
                // ],
                initLayout: [
                    // {"name":"GridLoginInfo",'params':{'title':'登陆信息','name':'default'}},
                    // {"name":"GridTodayOrder",'params':{'title':'今日订单','name':''}},
                    // {"name":"GridBaseData",'params':{'title':'基本数据','name':''}},
                    // {"name":"GridAccountRecord",'params':{'title':'账号记录','name':''}}
                ]
            }
        },
        mounted() {
            // if (localStorage.getItem('new_layout')) {
            //     this.layout = JSON.parse(localStorage.getItem('new_layout'));
            // } else {
            //     this.init();
            // }
            //     console.info(this.layout);
        },
        methods: {
            init() {
                Object.keys(this.componentList).forEach((items, i) => {
                    this.initLayout.forEach((item, index) => {
                        if (items == item.name) {
                            this.layout.push(
                                {
                                    "x":0,
                                    "y":0,
                                    "w":this.componentList[items].w,
                                    "h":this.componentList[items].h,
                                    "i":index,
                                    'model': this.componentList[items].model,
                                    "name":item.name,
                                    'params':item.params,
                                }
                            );
                        }
                    })
                })
                console.info(this.layout);
            },
            layoutUpdatedEvent(newLayout) {
                this.$emit('modifyLayout', newLayout)
                // console.info(JSON.stringify(newLayout));
                // localStorage.setItem('new_layout', JSON.stringify(newLayout));
            },
            movedEvent(i, newX, newY) {
                console.info(i, newX, newY);
            }
        }

    }
</script>
<style lang="less">
    /*.grid-card{*/
        /*.grid-card-header{*/
            /*font-weight: 600;*/
        /*}*/
    /*}*/
    .vue-grid-item {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px !important;
    }
    @media screen and (max-width: 1400px) {
        .vue-grid-item {
            box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px 0px !important;
            width: 100% !important;
            position: inherit !important;
            transform: none !important;
            margin-top: 10px !important;
            height: auto !important;
            float: left;
        }

    }
</style>
